import React,{Component} from "react";
import {Table, Select, Pagination, Button, message, Form, Input, Checkbox, Icon, Row, Col } from "antd";

class Plane extends Component{
    constructor(props){
        super(props);
        this.state = {
            UIstate:{
                nomalDisplay:"block",
                addDispaly:"none",
            },
            values:{
                companys:(()=>{//从后台查询出来的所有已经存在的公司
                    let arr = [];
                    for(let i = 0; i < 20; i++){
                        arr.push("航空公司"+i);
                    }
                    return arr;
                })(),
                type:["小型","中型","大型","巨型"],
                food:["无","正餐",'小食',"饮料"],
            },
            classType:{//显示是否展开座位的信息
                economyClass:false,
                economyOpen:false,
                bussinessClass:false,
                bussinessOpen: false,
                firstClass:false,
                firstOpent: false,
            },
            child:true,
            baby:true,
        }
    }
    addItem = (e) =>{
        this.setState({UIstate:{nomalDisplay:"none", addDispaly:"block"}});
        this.props.form.resetFields();
        //设置清空里面的内容
    }
    backClick = (e) =>{
        this.setState({UIstate:{nomalDisplay:"block", addDispaly:"none"}});
    }
    babyChange = (e) =>{
        this.state.baby?this.setState({baby:false}):this.setState({baby:true});
    }
    childChange = (e) =>{
        this.state.child?this.setState({child:false}):this.setState({child:true});
    }
    economyChange = (e) =>{
        this.state.classType.economyClass?
        this.setState({ classType:{...this.state.classType, economyClass:false, economyOpen:false} }):
        this.setState({ classType:{...this.state.classType, economyClass:true , economyOpen: true }});
    }
    economyOpenClick = (e) =>{
        this.state.classType.economyOpen?
        this.setState({ classType:{...this.state.classType, economyOpen:false} }):
        this.setState({ classType:{...this.state.classType, economyOpen: true} });
    }
    bussinessChange = (e) =>{
        this.state.classType.bussinessClass?
        this.setState({ classType:{...this.state.classType, bussinessClass:false, bussinessOpen:false} }):
        this.setState({ classType:{...this.state.classType, bussinessClass:true, bussinessOpen: true }});
    }
    bussinessOpenClick = (e) =>{
        this.state.classType.bussinessOpen?
        this.setState({ classType:{...this.state.classType, bussinessOpen:false} }):
        this.setState({ classType:{...this.state.classType, bussinessOpen: true} });
    }
    firstChange = (e) =>{
        this.state.classType.firstClass?
        this.setState({ classType:{...this.state.classType, firstClass:false, firstOpen:false} }):
        this.setState({ classType:{...this.state.classType, firstClass:true, firstOpen: true} });
    }
    firstOpenClick = (e) =>{
        this.state.classType.firstOpen?
        this.setState({ classType:{...this.state.classType, firstOpen:false} }):
        this.setState({ classType:{...this.state.classType, firstOpen: true} });
    }
    onSubmit = (e) =>{
        let state = 0;
        let values = this.props.form.getFieldsValue();
        console.log("所有的值",values);
        e.preventDefault();
        for(let item in values){
            if(!values[item]){ state = 1; break; }
        }
        if(!state){
            this.setState({UIstate:{nomalDisplay:"block", addDispaly:"none"}});
            message.success("保存成功");
        }
        else{
            message.error("请输入所有信息");
            e.preventDefault();
        }
    }
    render(){
        console.log("state", this.state);
        const state = this.state;
        const values = this.state.values;
        const classType = this.state.classType;
        const { getFieldProps } = this.props.form;
        const _this = this;
        const rowSelection ={
            onChange(selectedRowKeys, selectedRows) {
                _this.setState({selectedRows});
            }
        }
        const formItemLayout = {
            labelCol:{span: 10 },
            wrapperCol:{span: 14 },
        };
        const columns = [{
                title: '归属公司',
                dataIndex: 'company',
                key: 'company',
                // width:100,
                render: (text) => <span>{text}</span>,
            },{
                title: '类型',
                dataIndex: 'plane',
                key: 'plane',
                // width:100,
            }, {
                title: '机型',
                dataIndex: 'type',
                key: 'type',
                // width:100,
            },{
                title: '编号',
                dataIndex: 'airplaneNumber',
                key: 'airplaneNumber',
                // width:200,
                sorter: (a, b) => a.airplaneNumber > b.airplaneNumber,
            }, {
                title: '餐饮',
                dataIndex: 'food',
                key: 'food',
                width:100,
            },{
                title: '操作',
                key: 'operation',
                // width:200,
                render: (text, record) => (
                <span>
                    <a href="#">详情{record.name}</a>
                    <span>|</span>
                    <a href="#">删除{record.name}</a>
                </span>
                ),
            }
        ];
        let data = (()=>{
            let arr = [], i = 0;
            for(; i < 5; i++){
                arr.push({
                    key:i,
                    company:"公司名称"+i,
                    plane:"空中客车",
                    type:"中型机",
                    food:"正餐",
                    airplaneNumber:"飞机编号"+i,
                });
            }
            for(; i < 10; i++){
                arr.push({
                    key:i,
                    company:"公司名称"+i,
                    plane:"空中客车",
                    type:"中型机",
                    food:"小食",
                    airplaneNumber:"飞机编号"+i,
                });
            }
            for(; i < 15; i++){
                arr.push({
                    key:i,
                    company:"公司名称"+i,
                    plane:"空中客车",
                    type:"中型机",
                    food:"无",
                    airplaneNumber:"飞机编号"+i,
                });
            }
            return arr;
        })();
        return(
        <div className="plane">
            <div className="nomal" style={{display: state.UIstate.nomalDisplay}}>
                <div className="contral" >
                    <Form layout="inline" onSubmit={this.onSearch}>
                        <Form.Item>
                            <Button onClick={this.addItem}>新增</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button>删除选中</Button>
                        </Form.Item>
                        <Form.Item label="归属公司">
                            <Input placeholder="归属公司" {...getFieldProps('pCompany')}></Input>
                        </Form.Item>
                        <Form.Item>
                            <Button className="search">查询</Button>
                        </Form.Item>
                    </Form>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={data} scroll={{ y: 400 }}
                    // onChange={this.tableChange}
                    pagenation={
                        <Pagination
                            total={80}
                            showTotal={total => `共 ${total} 条`}
                            pageSize={20} defaultCurrent={1}
                        />
                    }
                ></Table>
            </div>
            <div className="add" style={{display: state.UIstate.addDispaly}}>
                <div className="contral">
                    <Button className="back" onClick={this.backClick}>返回</Button>
                </div>
                <Form onSubmit={this.onSubmit}>
                    <Row gutter={16} style={{borderBottom:"solid #ccc 1px"}}>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="所属公司">
                                <Select {...getFieldProps('company', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}>{
                                    (()=>{
                                        let  res = [];
                                        for(let i = 0; i < values.companys.length; i++){
                                            res.push(<Select.Option value={values.companys[i]} >{values.companys[i]}</Select.Option>);
                                        }
                                        return res;
                                    })()
                                }</Select>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="飞机类型">
                                <Input {...getFieldProps('plane', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                            
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="飞机大小">
                                < Select {...getFieldProps('type', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                        // {validator: this.checkDate},
                                    ],
                                })} placeholder="">{
                                    (()=>{
                                        let  res = [];
                                        for(let i = 0; i < values.type.length; i++){
                                            res.push(<Select.Option value={values.type[i]} >{values.type[i]}</Select.Option>);
                                        }
                                        return res;
                                    })()
                                }</Select>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="">
                                <Checkbox value="child" name="child" checked={state.child}  {...getFieldProps('child',{onChange:this.childChange})}>允许携带儿童</Checkbox>
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="飞机编号">
                                <Input {...getFieldProps('airplaneNumber', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="">
                                <Checkbox value="baby" name="baby" checked={state.baby} {...getFieldProps('baby',{onChange:this.babyChange})}>允许携带婴儿</Checkbox>
                            </Form.Item>
                        </Col>
                    </Row>
                    <div className="class-title">
                        <p className="left"><Checkbox onChange={this.economyChange}>经济舱</Checkbox></p>
                        <p className="right" onClick={this.economyOpenClick}>{classType.economyOpen?<Icon className="open-flag" type="down" />:<Icon  className="open-flag" type="up" />}</p>
                    </div>
                    <Row gutter={16} style={{borderBottom:"solid #ccc 1px"}} style={{display:classType.economyOpen?"block":"none"}}>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位数量">
                                <Input type="number" min={1} max={1000} {...getFieldProps('e_number', { rules: [{required: classType.economyClass}], })} />
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="座位间距(cm)">
                                <Input min={0} max={100} {...getFieldProps('e_space', { rules: [{required: classType.economyClass}], })} />
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位宽度(cm)">
                                <Input min={0} max={100} {...getFieldProps('e_swidth', { rules: [{required: classType.economyClass}], })} />
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位可倾斜°">
                                <Input min={90} max={180} {...getFieldProps('e_angle', { rules: [{required: classType.economyClass}], })} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <div className="class-title">
                        <p className="left"><Checkbox onChange={this.bussinessChange}>商务舱</Checkbox></p>
                        <p className="right" onClick={this.bussinessOpenClick}>{classType.bussinessOpen?<Icon className="open-flag" type="down" />:<Icon  className="open-flag" type="up" />}</p>
                    </div>
                    <Row gutter={16} style={{borderBottom:"solid #ccc 1px"}} style={{display:classType.bussinessOpen?"block":"none"}}>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位数量">
                                <Input type="number" min={1} max={1000} {...getFieldProps('b_number', { rules: [{required: classType.bussinessClass}], })} />
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="座位间距(cm)">
                                <Input min={0} max={100} {...getFieldProps('b_space', { rules: [{required: classType.bussinessClass}], })} />
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位宽度(cm)">
                                <Input min={0} max={100} {...getFieldProps('b_width', { rules: [{required: classType.bussinessClass}], })} />
                            </Form.Item> 
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位可倾斜°">
                                <Input min={90} max={180} {...getFieldProps('b_angle', { rules: [{required: classType.bussinessClass}], })} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <div className="class-title">
                        <p className="left"><Checkbox onChange={this.firstChange}>头等舱</Checkbox></p>
                        <p className="right" onClick={this.firstOpenClick} >{classType.firstOpen?<Icon className="open-flag" type="down"/>:<Icon  className="open-flag" type="up" />}</p>
                    </div>
                    <Row gutter={16} style={{borderBottom:"solid #ccc 1px"}} style={{display:classType.firstOpen?"block":"none"}}>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位数量">
                                <Input type="number" min={1} max={1000} {...getFieldProps('f_number', { rules: [{required: classType.firstClass}], })} />
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="座位间距(cm)">
                                <Input min={0} max={100} {...getFieldProps('f_space',{ rules: [{required: classType.firstClass}], })} />
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位宽度(cm)">
                                <Input min={0} max={100} {...getFieldProps('f_width', { rules: [{required: classType.firstClass}], })} />
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="座位可倾斜°"> 
                                <Input min={90} max={180} {...getFieldProps('f_angle', { rules: [{required: classType.firstClass}], })} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Button className="submit-btn" type="primary" htmlType="submit">提交</Button>
                    </Row>
                </Form>
            </div>
        </div>)
    }
}

export default Form.create({})(Plane);